<template>
	<view class="container">
		<view class="header">
			<view class="logo">
				<image src="https://ai-public.mastergo.com/ai/img_res/aaeeaed3deaca752e4077f8d1ca08866.jpg"
					mode="aspectFit" class="logo-image" />
			</view>
			<view class="welcome">欢迎来到</view>
		</view>

		<view class="main-content">
			<view class="tabs">
				<!-- <view class="tab" :class="{ active: currentTab === 'register' }" @click="switchTab('register')">注册</view> -->
				<view class="tab" :class="{ active: currentTab === 'login' }" @click="switchTab('login')">登录</view>
			</view>

			<view class="form">
				<view class="input-group">
					<uni-icons type="person" size="20" color="#999999" />
					<input type="text" v-model="phone" placeholder="请输入账号" class="input" />
					<uni-icons v-if="phone" type="clear" size="20" color="#999999" @click="clearPhone" />
				</view>

				<view class="input-group">
					<uni-icons type="locked" size="20" color="#999999" />
					<input :type="showPassword ? 'text' : 'password'" v-model="password" placeholder="请输入密码"
						class="input" />
					<uni-icons :type="showPassword ? 'eye-filled' : 'eye-slash-filled'" size="20" color="#999999"
						@click="togglePassword" />
				</view>

				<!--        <view class="forgot-password" @click="forgotPassword">
          忘记密码?
        </view> -->

				<button class="login-btn primary" @click="handleLogin">
					立即登录
				</button>

				<!--        <button class="login-btn secondary" @click="handleDynamicLogin">
          动态密码登录
        </button> -->

				<!--        <view class="agreement">
          <checkbox :checked="agreed" @click="toggleAgreement" color="#FF6634"/>
          <text class="agreement-text">
            勾选即表示同意17素材
            <text class="link" @click="openTerms">协议条款</text>
            和
            <text class="link" @click="openPrivacy">隐私政策</text>
          </text>
        </view> -->
			</view>

			<!--      <view class="third-party">
        <view class="divider">
          <view class="line"></view>
          <text class="text">第三方登录</text>
          <view class="line"></view>
        </view>
        
        <view class="social-login">
          <view class="social-item" @click="handleSocialLogin('wechat')">
            <uni-icons type="weixin" size="40" color="#07C160"/>
          </view>
          <view class="social-item" @click="handleSocialLogin('weibo')">
            <uni-icons type="weibo" size="40" color="#FF6634"/>
          </view>
          <view class="social-item" @click="handleSocialLogin('qq')">
            <uni-icons type="qq" size="40" color="#2196F3"/>
          </view>
        </view>
      </view> -->
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, getCurrentInstance,onMounted } from 'vue';
	const { proxy } = getCurrentInstance();
	const currentTab = ref('login');
	const phone = ref('');
	const password = ref('');
	const showPassword = ref(false);
	const agreed = ref(false);

	const switchTab = (tab : string) => {
		currentTab.value = tab;
	};

	const clearPhone = () => {
		phone.value = '';
	};

	const togglePassword = () => {
		showPassword.value = !showPassword.value;
	};

	const toggleAgreement = () => {
		agreed.value = !agreed.value;
	};
	
	const chushi = ()=>{
		let token = uni.getStorageSync('token');
		if(token){
			uni.reLaunch({
				url: '/pages/users/users'
			});
		}
	}
 
	onMounted(()=>{
		chushi()
	})

	const handleLogin = () => {

		proxy.$http({
			url: '/login',
			method: 'post',
			data: {
				email: phone.value,
				password: password.value
			}
		}).then((r : any) => {

			console.log(r)
			if (r.data.code === 10000) {

				uni.setStorageSync('token', r.data.data.token);
				uni.setStorageSync('userInfo', r.data.userInfo);
				uni.reLaunch({
					url: '/pages/users/users'
				});
			} else {
				uni.showToast({
					title: r.data.message,
					icon: 'none'
				});
			}

		})


	};

	const handleSocialLogin = (platform : string) => {
		// 处理第三方登录逻辑
	};

	const forgotPassword = () => {
		// 处理忘记密码逻辑
	};

	const openTerms = () => {
		// 打开协议条款
	};

	const openPrivacy = () => {
		// 打开隐私政策
	};
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		min-height: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
	}

	.header {
		background-color: #FF6634;
		padding: 60rpx 40rpx 100rpx;
		border-radius: 0 0 30rpx 30rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.logo-image {
		width: 100%;
		height: 100%;
	}

	.welcome {
		color: #FFFFFF;
		font-size: 32px;
		font-weight: 500;
	}

	.main-content {
		margin-top: -50rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		flex: 1;
		padding: 40rpx;
	}

	.tabs {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.tab {
		font-size: 16px;
		color: #999999;
		padding: 20rpx 40rpx;
		position: relative;
	}

	.tab.active {
		color: #FF6634;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 40rpx;
		right: 40rpx;
		height: 4rpx;
		background-color: #FF6634;
		border-radius: 2rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 14px;
	}

	.forgot-password {
		text-align: right;
		color: #FF6634;
		font-size: 14px;
		margin-bottom: 40rpx;
	}

	.login-btn {
		width: 100%;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 16px;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-btn.primary {
		background-color: #FF6634;
		color: #FFFFFF;
	}

	.login-btn.secondary {
		background-color: #FFFFFF;
		color: #FF6634;
		border: 2rpx solid #FF6634;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
	}

	.agreement-text {
		font-size: 12px;
		color: #999999;
		margin-left: 10rpx;
	}

	.link {
		color: #FF6634;
	}

	.divider {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 0;
	}

	.line {
		flex: 1;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	.text {
		color: #999999;
		font-size: 14px;
		margin: 0 20rpx;
	}

	.social-login {
		display: flex;
		justify-content: center;
		gap: 80rpx;
	}

	.social-item {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>